<template>
	<view class="container">
		<view class="card">
			<u-cell-group>
				<u-cell title="头像" :rightIconStyle="iconStyle" size="large">
					<block slot="right-icon">
						<u-upload @afterRead="afterRead" name="1" :maxCount="1" :previewFullImage="false"
							class="uploadAvator">
							<u-avatar :src="avator" class="avator" size="80"></u-avatar>
						</u-upload>
					</block>
				</u-cell>
				<u-cell title="昵称" :value="userName" size="large"
					@click="goto('/minepkg/change_username/change_username')">
				</u-cell>
				<u-cell title="用户ID" size="large">
					<block class="userId" slot="value">{{userId}}</block>
				</u-cell>
				<u-cell title="手机号" :value="phone" size="large"></u-cell>
				<u-cell title="地产项目" :value="developName" size="large"></u-cell>
			</u-cell-group>
		</view>
		<button class="btn" @click="exit()">退出登录</button>
	</view>
</template>

<script>
	import store from '@/store/store.js'
	export default {
		onLoad() {
			this.init()
		},
		onShow() {
			this.avator = uni.$http.baseURL + '/file/download?fileId=' + uni.getStorageSync('avator')
			this.userName = uni.getStorageSync('userName')
		},
		data() {
			return {
				userName: uni.getStorageSync('userName'),
				phone: uni.getStorageSync('phone'),
				// isMember: uni.getStorageSync('roleId') == 1 ? '未绑定' : '已绑定',
				//todo 获取开发商名称
				developName: uni.getStorageSync('selectedEstate'),
				userId: uni.getStorageSync('userId'),
				avator: uni.$http.baseURL + '/file/download?fileId=' + uni.getStorageSync('avator'),
			};
		},
		methods: {
			// 新增图片
			async afterRead(event) {
				// console.log(event)
				const result = await this.uploadFilePromise(event.file.url)
				const temp = JSON.parse(result)
				console.log(temp.body.fileId)
				store.dispatch('user/setAVATOR', temp.body.fileId)
				this.avator = uni.$http.baseURL + '/file/download?fileId=' + temp.body.fileId
				this.updateInfo(temp.body.fileId)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: uni.$http.baseURL + '/file/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							'fileType': 1
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},
			async updateInfo(url) {
				const info = {}
				info.headerUrl = url
				info.password = uni.getStorageSync('password')
				info.phone = uni.getStorageSync('phone')
				info.userId = uni.getStorageSync('userId')
				info.userName = uni.getStorageSync('userName')
				info.wxId = uni.getStorageSync('openId')
				info.roleId = uni.getStorageSync('roleId')
				const {
					data: res
				} = await uni.$http.post(uni.$http.baseURL + '/user/updateUserInfo', info)
			},
			init() {
				//初始化个人信息
				this.phone = uni.getStorageSync('phone')
				this.avator = uni.getStorageSync('avator')
				this.userId = uni.getStorageSync('userId')
			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
			exit() {
				uni.showModal({
					content: '是否确认退出登录？',
					cancelColor: '#E62129',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
							uni.$http.get(uni.$http.baseURL + '/user/loginOut')
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 30rpx 110rpx 30rpx;
		background-color: #efefef;
	}

	.card {
		border: 1rpx solid #EFEFEF;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}

	.btn {
		margin-top: 480rpx;
		width: 650rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #E62129 0%, #BA000A 100%);
		box-shadow: 0rpx 5rpx 15rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 44rpx;
		color: #FFFFFF !important;
	}

	.userId {
		width: 400rpx;
		overflow: hidden;
		/* #ifndef APP-NVUE */
		white-space: nowrap;
		text-overflow: ellipsis;
		/* #endif */
		/* #ifdef APP-NVUE */
		lines: 1;
		text-overflow: ellipsis;
		/* #endif */
	}
</style>
